<!DOCTYPE HTML>
<html>
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>猜你想找</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/goods.css" />
		<style>
		html,body {background-color: rgba(0, 0, 0, 0);}
		header {position: fixed;top: 0;left: 0;right: 0;bottom: 0;}
		#app {width: 100%;background-color: #ffffff;border-top-left-radius: 15px;border-top-right-radius: 15px;
			position: fixed;bottom: 0;left: 0;}

		#app .close {
			widows: 22px;
			height: 22px;
			position: absolute;
			top: 15px;
			right: 15px;
		}

		#app .search_icon {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background-color: #ffffff;
			z-index: -1;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			top: -30px;
		}

		#app .search_icon img {
			width: 22.5px;
			height: 31.5px;
			position: absolute;
			top: 7.5px;
			right: 0;
			left: 0;
			margin: auto;
		}

		#app .app-title {
			width: 100%;
			padding: 16px 0 10px;
			box-sizing: border-box;
			text-align: center;
			font-size: 16px;
			color: #ff4c41;
			border-bottom: 1px solid #f5f5f5;
		}

		.content {
			-webkit-overflow-scrolling: touch;
			height: 60vh;
			overflow: auto;
		}

		#one {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		#one .title {
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		#one .goods {
			border-bottom-left-radius: 15px;
			border-bottom-right-radius: 15px;
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 300px;
		}

		#one .goods .div {
			padding: 10px;
			background: #fff;
			display: flex;
			align-items: center;
		}

		#one .goods .text {
			margin-left: 5px;
		}


		#one .goods .div>img {
			flex: none;
			object-fit: cover;
			width: 80px;
			height: 80px;
		}

		.price {
			position: relative;
			align-items: flex-end;
			display: flex;
			margin: 8px 0;
		}

		.price div {
			line-height: 16px;
			font-size: 16px;
			color: #f41e1e;
		}

		.favorable {
			display: flex;
			align-items: flex-end;
		}

		.favorable .coupon_amount {
			height: 18px;
			text-align: center;
			line-height: 18px;
			font-size: 12px;
			color: #ffffff;
			padding: 0 6px;
			border-radius: 10px;
			background-image: linear-gradient(90deg, #ff4425 0%, #ff2323 100%);
		}

		.favorable>:last-child {
			padding: 0 6px;
			height: 14px;
			text-align: center;
			line-height: 14px;
			font-size: 10px;
			margin-left: 10px;
			border-radius: 10px;
			background: #ffd006;
		}

		#one>img:last-child {
			margin-top: 20px;
			width: 30px;
			height: 30px;
		}

		#one>img:first-child {
			border-top-left-radius: 15px;
			border-top-right-radius: 15px;
			width: 300px;
		}

		#one .goods .button {
			margin-bottom: 10px;
			width: 240px;
			height: 35px;
			font-size: 14px;
			line-height: 35px;
			color: #ffffff;
			text-align: center;
			border-radius: 30px;
			background:#ff4341;
		}

		.searchlistbox{padding:10px 5px;background: #fff;width:100%;}
		.searchlistbox .listTitle{font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
			-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom:3px;}
		.searchlistbox .listTitle img{width: 14px; height: 14px;display: inline-block;vertical-align:middle;
			padding-bottom: 4px;padding-right:2px;}
		.searchlistbox1{display: flex;flex-wrap: nowrap;margin-bottom: 5px;}
		.searchlistbox1 span:nth-child(1){font-size: 12px;height: 16px; line-height: 16px;padding: 0 5px;
			background-image: url(../image/goods/quanbg.png);background-size: 100% 100%;color: #fff;}
		.searchlistbox1 span:nth-child(2){font-size: 12px;height: 16px; line-height: 16px;padding: 0 4px;color:#ff4d3A;
			background:#ffe4e4;border:0.5px solid #ff4d3A;border-radius: 4px;box-sizing: border-box;margin-left: 4px;}
		.searchlistbox2{margin-bottom:6px;}
		.searchlistbox2 span{color: #999;font-size: 12px;overflow: hidden;text-overflow: ellipsis;
			display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;}
		.searchlistbox3{display: flex;justify-content:space-between;margin-top: 8px;width: 100%;}
		.searchlistbox3 span:nth-child(1){font-size: 12px;color: #999;}
		.searchlistbox3 span:nth-child(2){font-size: 12px;color: #999;padding-right:5px;}
		.searchlistbox3 .end_priceBox{color: #ff4c41 !important;font-size: 16px !important;}

		.singleSearchBox{padding:10px;background: #fff;display: flex;align-items: center;}
		.singleSearchBox img{flex: none;object-fit: cover;	width: 85px;height: 85px;margin-right: 10px;}
		.singleSearchBox1 .titlebox{font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
			-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-bottom: 5px;}
		.singleSearchBox1 .quan{font-size: 12px;height: 16px; line-height: 16px;padding: 0 5px;
			background-image: url(../image/goods/quanbg.png);background-size: 100% 100%;color: #fff;}
		.singleSearchBox1 .butie{font-size: 12px;height: 16px; line-height: 16px;padding: 0 4px;color:#ff4d3A;
			background:#ffe4e4;border:0.5px solid #ff4d3A;border-radius: 4px;box-sizing: border-box;margin-left: 4px;}
		.singleSearchBox3{display: flex;flex-wrap:nowrap ;justify-content:space-between;margin-top: 5px;}
		.singleSearchBox3 span:nth-child(1){font-size: 12px;color: #999;align-items: flex-start;}
		.singleSearchBox3 span:nth-child(2){font-size: 12px;color: #ff4c41;padding-right:5px;align-items: flex-start;}
		.singleSearchBox3 .endmoney{color: #ff4c41 !important;font-size: 16px !important;align-items: flex-start;}
	</style>
</head>

<body>
		<header onclick="back()" tapmode=""></header>
	<div id="app" class="none">
		<div class="search_icon">
			<img src="../image/supersearch_icon_search.png" alt="">
		</div>
		<img onclick="back()" tapmode="" class="close" src="../image/message_icon_close.png" alt="">
		<div class="app-title">
			该商品优惠领光啦<br>猜你想搜↓
		</div>
		<div class="content">
			<ul class="horizontal">

			</ul>
		</div>
	</div>
	<div id="one" class="none">
		<img src="../image/img_smartsearch.png">
		<div class="goods">

		</div>
		<img src="../image/home_icon_shutdown.png" alt="" onclick="back()">
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
let good_list = []
let next_p = 1;
var pddquanUrl = '';//当前拼多多券链接
apiready = function () {
		api.parseTapmode();
		//复制文字搜索商品
				$api.removeCls($api.dom("#app"), "none")
				getHtml(api.pageParam.data);
				addEvent();

};

	function back() {
		api.setFrameAttr({
			name: 'think_find',
			bgColor: "rgba(0,0,0,0)"
		});
		api.closeFrame({
		});
	}

	function addEvent() {
		api.addEventListener({
			name: 'scrolltobottom',
			extra: {
				threshold: 1000,
			},
		}, function (ret, err) {
			getlist()
			api.removeEventListener({
				name: 'scrolltobottom'
			});
			setTimeout(function () {
				addEvent()
			}, 1000)
		});
	}

	function getlist() {
		$api.ajax({
			url: 'api/goods/search',
			method: 'get',
			data: {
				values: {
					q: api.pageParam.string,
					next_p: next_p,
				}
			},
			page: next_p,
			timeOutHtml: $api.dom('.content')
		}, function (ret) {
			if(ret.data.list.length == 0){
					api.toast({
					    msg:ret.data.msg,
					    duration: 1500,
					    location: 'middle'
					});
					return
			}
			getHtml(ret.data)
		});
	}
	function getHtml(data) {
		let list = "";
		next_p = data.next_p
		good_list = good_list.concat(data.list);
		data.list.forEach((item, value) => {
			let html =
			'<li onclick="openGoodsDeatilFun(' + JSON.stringify(item).replace(/\"/g,"'") + ')">' +
          '<img src="' + item.pict_url + '_310x310.jpg" alt="" onerror="showDefaultImg(this)">' +
        	'<div class="searchlistbox">'+
              '<div class="listTitle">' + `<img src="`+ (item.user_type == 0 ? "../image/goods/bill_icon_tmall.png" :
							(item.user_type == 1 ? "../image/goods/bill_icon_taobao.png" :
							(item.user_type == 2 ? "../image/goods/pd.png":"../image/goods/jd.png"))) +`" alt=""/>`+ item.short_title + '</div>' +
						 '<div class="searchlistbox2">'+
						 		'<span>'+ item.shop_title +'</span>' +
						 '</div>'+
							'<div class="searchlistbox1">'+
                	'<span>券' + (item.coupon_amount ? item.coupon_amount : 0.00) + '元</span>' +
                  '<span>补贴' + item.per_price + '元</span>' +
              '</div>'+
              '<div class="searchlistbox3">' +
									'<span>到手价￥<span class="end_priceBox">'+item.end_price +'</span></span>' +
									'<span>已抢'+ item.volume +'件</span>' +
              '</div>'+
          '</div>'+
      '</li>'
			$api.append($api.dom(".horizontal"), html);
		})
		api.refreshHeaderLoadDone();
		api.parseTapmode();
	}



function sunNum(num1 ,num2){
	return (Number(num1) + Number(num2)).toFixed(2);
}
function opendetail(id,type) {
	// if(type == 2){
			// var h5Url = encodeURIComponent(pddquanUrl);
			// var backUrl = encodeURIComponent("yqlm://?from=pdd");
			// if (api.systemType == "android") {
			// 		location.href = "pddopen://?appKey=ca8913c1b218442ab23dccff04370e04&packageId=com.t419864334.jma&backUrl=" + backUrl + "&h5Url=" + h5Url;
			// 		api.openApp({
			// 		    androidPkg:location.href ,
			// 		    mimeType: 'text/html',
			// 		    uri: location.href
			// 		}, function(ret, err) {
			// 		    if (ret) {
			// 		        alert(JSON.stringify(ret));
			// 		    } else {
			// 		        alert(JSON.stringify(err));
			// 		    }
			// 		});
			//
			// }else if (api.systemType == "ios") {
			// 		var iospdd = "pddopen://?appKey=ca8913c1b218442ab23dccff04370e04&packageId=com.api.testapp20191025&backUrl=" + backUrl + "&h5Url=" + h5Url;
			// 		console.log("IOS唤起PDD：" + iospdd);
			// 		location.href = iospdd;
			// 		api.openApp({
			// 				iosUrl: iospdd,
			// 		}, function(ret, err) {
			// 				if (ret) {
			//
			// 				} else {
			//
			// 				}
			// 		});
			// }
	// }else{
		api.openTabLayout({
			name: 'item',
			url: './item.html',
			useWKWebView: true,
			bgColor: '#fff',
			pageParam: {
				item: good_list[good_list.findIndex(item => {
					return item.item_id ==id
				})]
			}
		});
	// }
	back();
}
</script>
</html>
